<template>
	<view class="container">
		<view v-if="profile.empId" class="massage_header">
			<view @click="toMyHongbao" class="my_HB">我的红包<image class="icon"
					src="../../static/images/massage/hongbao.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="massage_main">
			<view class="list_item" v-for="(item, index) in massageList" @click="toMassageChat(item)">
				<view class="item_header">
					<image class="header_icon" src="../../static/images/massage/hongbao.png"
						mode="scaleToFill">
				</view>
				<view class="item_content">
					<view class="item_title">
						{{item.deptName}}
					</view>
					<view class="item_msg">
						{{item.teacher ? "" : item.massage}}
					</view>
				</view>
				<view class="item_info">
					<text>共{{item.num}}人</text>
					<text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDeptList,
		queryStudentCardBalance,
		getRedPacketLog
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	export default {
		onNavigationBarButtonTap(e) {
			this.toMyHongbao()
		},
		data() {
			return {
				massageList: [
					// {
					// 	icon: "../../static/images/massage/hongbao.png",
					// 	depName: "这是班级信息",
					// 	massage: "这是一条信息",
					// 	time: "23-05-16"
					// }
				],
				orgId: '',
				empId: '',
				profile: {},
				redPacketLog: {}
			};
		},
		onLoad() {},
		onShow() {
			this._getDeptList()
		},
		methods: {
			toMyHongbao() {
				uni.navigateTo({
					url: '/pageMassage/massageChat/tool/redBoxHistory'
				})
			},
			toMassageChat(dept) {
				uni.navigateTo({
					url: '../../pageMassage/massageChat/index?dept=' + JSON.stringify(dept)
				})
			},
			async _getDeptList() {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				this.massageList = []
				let s_userId = uni.getStorageSync("s_userId");
				const result = await queryStudentCardBalance({
					userId: s_userId,
					bindType: '0'
				})
				if (result.code != 0) {
					_showToast('数据获取失败，请稍后重试')
					return
				}
				if (result.data.students.length == 0) {
					uni.hideLoading()
					return
				}
				const profile = this.profile = result.data.students[0].students[0];

				const resLog = await getRedPacketLog({
					orgId: profile.orgId,
					empId: profile.empId,
				})
				if (resLog.code == 0) {
					uni.hideLoading()
					this.redPacketLog = resLog.data[0]
				} else {
					uni.hideLoading()
					this.redPacketLog = {
						state: 1
					}
				}

				const res = await getDeptList({
					orgId: profile.orgId,
					empId: profile.empId
				})
				console.log(res.data)
				if (res.code == 0) {
					uni.hideLoading()
					res.data.forEach(i => {
						this.massageList.push({
							icon: "../../static/images/massage/hongbao.png",
							massage: i.redPacketReady && this.redPacketLog
								.state == 1 ? "有一个红包待领取" : "暂无信息",
							time: "23-05-16",
							...i
						})
					})
				} else {
					_showToast('数据获取失败，请稍后重试')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		// background: linear-gradient(195deg, #00a8d1, #75c9dd 10%, #FFF 80%);
		background-color: #FFF;
	}

	.border {
		content: "";
		display: flex;
		height: 1rpx;
		transform: scaleY(0.5);
		width: 100%;
		background-color: #ddd;
		position: absolute;
		bottom: 0;
		left: 24rpx;
	}

	.massage_header {
		.my_HB {
			height: 80rpx;
			padding: 0 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			background-color: #FFF;
			font-size: 24rpx;
			color: #999;
		}

		.icon {
			width: 40rpx;
			height: 44rpx;
		}
	}

	.list_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background-color: #FFF;
		position: relative;
		height: 100rpx;

		// border-bottom: 1rpx solid #ddd;
		&::after {
			@extend .border;
			left: 124rpx
		}
	}

	.item_header {
		width: 100rpx;
		height: 100rpx;

		.header_icon {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.item_content {
		flex: 1;
		padding: 0 12rpx;
	}

	.item_content,
	.item_info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
	}

	.item_title {
		font-weight: 700;
	}

	.item_msg,
	.item_info {
		font-size: 20rpx;
		color: #999;
	}
</style>